<template>
  <div class="section">
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="closeCallBack"
    >
      <template v-for="slot in Object.keys(slots)" #[slot]="scope">
        <slot :name="slot" :value="scope"></slot>
      </template>
      <slot name="content"></slot>
      <div class="container">测试测试</div>
      <template #footer>
        <el-button @click="handleBtn('close')">关闭</el-button>
        <el-button type="primary" @click="handleBtn('save')">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    watch,
    useSlots,
    // defineModel
  } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    contentColor: {
      type: String,
      default: '',
    },
  })

  // const dialogVisible = defineModel('modelValue')
  // console.log(dialogVisible)
  // console.log(props.contentColor)

  const emit = defineEmits(['update:modelValue', 'handleBtn'])
  const slots = useSlots()
  // console.log(Object.keys(slots))

  const dialogVisible = ref(false)

  //   watchEffect(() => {
  //     console.log(props.modelValue)
  //     dialogVisible.value = props.modelValue
  //   })
  watch(
    () => props.modelValue,
    val => {
      dialogVisible.value = val
    }
  )
  const handleBtn = val => {
    emit('handleBtn', {
      msg: val == 'save' ? '保存成功' : '取消成功',
      value: val,
    })
    emit('update:modelValue', false)
  }
  const closeCallBack = done => {
    emit('update:modelValue', false)
    done()
  }
</script>

<style lang="scss" scoped>
  .section {
    .container {
      color: v-bind('props.contentColor');
    }
  }

  // :deep(.el-dialog__footer) {
  //   text-align: center;
  // }
</style>
